<template>
    <ayjDrawer class="sales-box" :title="sale_day_title" width="40%" ref="ayjDrawerShopSellLsRef" :slotFooter="false"
        @closeFun="handleClose">
        <div ref="containerBoxRef" class="container_box">
            <div ref="pointsBoxRef" class="mb5">
                <div class="flex_between">
                    <div class="flex1">
                        <SaleCount :count_all="shopsell_count_all" :rowCol="18" :size="'small'" />
                    </div>
                </div>
                <!-- 日报 导出 -->
                <div class="mt10" v-if="shopsell_count__ls && shopsell_count__ls.length && shopsell_count__ls[0].order_ls && shopsell_count__ls[0].order_ls.length">
                    <el-button type="primary" size="mini" icon="el-icon-download" @click="exportReport"
                        style="font-size: 12px;padding:5px">导出{{ sale_day_title }}报表</el-button>
                </div>
            </div>
            <div class="flex_column flex1">
                <div class="table_box mt5">
                    <div class="table_box_scorll" :style="{ height: dynamicHeight + 'px' }">
                        <template
                            v-if="shopsell_count__ls && shopsell_count__ls.length && shopsell_count__ls[0].order_ls && shopsell_count__ls[0].order_ls.length">
                            <div class="cell-box mb5" v-for="(item, index) in shopsell_count__ls[0].order_ls"
                                :key="index">
                                <div class="flex_between goods_ls_header">
                                    <div class="flex_row">
                                        <div class="">
                                            <span class="font_black7">下单时间：</span>
                                            <span class="font_black2">{{ item.h_i || '--' }}</span>
                                        </div>
                                        <div class="line"></div>
                                        <div class="">
                                            <span class="font_black7">公司名称：</span>
                                            <span class="font_black2">{{ item.company || '--' }}</span>
                                        </div>
                                        <div class="line"></div>
                                        <div class="">
                                            <span class="font_black7">客户名称：</span>
                                            <span class="font_bule under-line" @click="customerHandle(item)">{{
                                                item.customername || '--' }}</span>
                                        </div>
                                        <div class="line"></div>
                                        <div class="">
                                            <span class="font_black7">下单金额：</span>
                                            <span class="font_green">{{ item.amount || '--' }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="goods_ls_list" v-if="item.goods_ls && item.goods_ls.length">
                                    <div v-for="(goods, dIndex) in item.goods_ls" :key="dIndex">
                                        <shopCard :goods="goods"></shopCard>
                                    </div>
                                </div>
                                <div v-else class="flex_center font_black9 mt10"> 暂无数据 </div>
                            </div>
                        </template>
                        <empty v-else></empty>
                    </div>
                </div>
            </div>
        </div>
        <ayjDrawer title="用户详情" width="60%" ref="ayjDrawerRef" :slotFooter="true">
            <template v-if="customerId">
                <customersThree ref="customersThreeRef" :xsgf="15" :isDrawerOpen="true" :customerId="customerId">
                </customersThree>
            </template>
            <template v-else>
                <empty></empty>
            </template>
        </ayjDrawer>
    </ayjDrawer>
</template>

<script setup>
import { ref, reactive, onMounted, computed, getCurrentInstance, defineProps, defineExpose, watch } from '@vue/composition-api'
import { useDynamicHeight } from '@/hooks/useDynamicHeight'
import { useSaleState } from '@/components/report/hooks/useSaleState'
import empty from "@/components/comm/empty.vue";

import SaleCount from '@/components/report/saleV3/SaleCount.vue'
import shopCard from '@/components/commV2/ShopCard/index.vue'
import customersThree from '@/components/customers/CustomersThree.vue';
import ExcelExporter from '@/utils/excelExport.js'

const { proxy } = getCurrentInstance();
import config from "@/js/conf/Config.js";
import localStore from "@/js/LocalStore.js";
import { Empty } from 'element-ui'
const maxPnum = 20

const containerBoxRef = ref(null)
const pointsBoxRef = ref(null)
const loading = ref(false)
const hasMore = ref(true)

// 使用销售状态
const {
    shopsell_count__ls,
    shopsell_count_all,
    sale_day_title,
    reqShopCount,
    itemDayClick,
    exportReport,
    stime_type,
    sale_day_timestr,
    sale_day_old_timestr
} = useSaleState()

// 使用动态高度 hooks
const { dynamicHeight, updateHeight } = useDynamicHeight({
    containerRef: containerBoxRef,
    subtractRef: pointsBoxRef,
    extraHeight: 20 // 额外的间距
})

const columnsTa = computed(() => [
    {
        title: '序号',
        prop: 'index',
        width: '50px',
        align: 'center',
        render: (row, column, index) => index + 1,
    },
    { title: '日期', prop: (reqShopCount.value.group == 2 || reqShopCount.value.group == 3) ? 'time' : 'timestr', slot: true },
    { title: '销售额', prop: 'amount_re', align: 'center' },
    { title: '毛利', prop: 'profit_re', align: 'center', slot: true },
    { title: '单数', prop: 'num_od_re', align: 'center' },
    { title: '数量', prop: 'number_re', align: 'center' },
])

// 监听 reqShopCount 变化时更新日期列的 prop
watch(() => reqShopCount.value.group, (newVal) => {
    columnsTa.value[1].prop = newVal == 2 || newVal == 3 ? 'time' : 'timestr'
}, { immediate: true })


const props = defineProps({
    getYyInfoData: {
        type: Object,
        default: () => ({})
    }
})

const ayjDrawerShopSellLsRef = ref(null)
const open = async () => {
    ayjDrawerShopSellLsRef.value.open();
    setTimeout(() => {
        updateHeight()
    }, 100)
}

const handleClose = () => {
    shopsell_count_all.value = {}
    shopsell_count__ls.value = []
    stime_type.value = 2
    sale_day_timestr.value = sale_day_old_timestr.value
    ayjDrawerShopSellLsRef.value.close();
}

const customerId = ref('')
const ayjDrawerRef = ref(null)
const customerHandle = (item) => {
    ayjDrawerRef.value.open()
    customerId.value = item.customerid || '-1' //item.id 10 263  51
}

onMounted(() => { })

defineExpose({
    open
})
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
    padding: 10px 0 !important;
}

.customer_points_top {
    padding: 10px;
    border-radius: 6px;
}

.select_store ::v-deep .el-input__inner {
    background-color: #f5f5f5 !important;
    border: none !important;
    color: #333 !important;
    padding-left: 4px !important;
    text-align: left !important;
    border-radius: 0 !important;
}

.customer_points_top ::v-deep .el-divider--vertical {
    height: 1.5rem !important;
    position: relative;
    left: -10px;
}

.container_box {
    border-radius: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.table_box {
    flex: 1;

    .table_box_scorll {
        box-sizing: border-box;
        background-color: #f9f9f9;
        border-radius: 6px;
        padding: 10px;
    }

    .cell-box {
        border: 1px solid #f0eeee;
        border-radius: 4px;
        padding: 10px 0;
        background-color: #fff;

        .goods_ls_header {
            padding: 0 10px 5px;
        }

        .goods_ls_list {
            padding: 5px 10px 0;
            border-top: 1px solid #f0eeee;
        }

        .line {
            background-color: #f0eeee;
            height: 20px;
            width: 1px;
            margin: 0 10px;
        }
    }
}

.sales-box {
    ::v-deep .el-drawer {
        width: 40% !important;
    }
}
</style>
